import { useEffect } from 'react'
import Top from '@/components/TodoList/Top'
import Todo from '@/components/TodoList/Todo'
import Footer from '@/components/TodoList/Footer'
import '@/components/TodoList/index.scss'
import todoStorage from './TodoStorage/index' // 状态持久化
import useTodos from '@/hooks/useTodos'; //引入自定义hooks

export default function App() { 
    const { todos ,addTodo,changeState, removeTodo,CheckAllTodo,clearDoneTodos } = useTodos(todoStorage.fetch())

    useEffect(() => {
        todoStorage.save(todos)
    }, [todos])

    return (
        <div className='container'>
            <Top addTodo = { addTodo } />
            <Todo todos={todos} changeState = { changeState } removeTodo = { removeTodo }/>
            <Footer todos= {todos} CheckAllTodo = { CheckAllTodo } clearDoneTodos = { clearDoneTodos }/>
        </div>
    )
 }